<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snabbdom demo</title>
    <style>
        #app{
            width: 800px;
            margin: 20px auto;
        }
        .btn{
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
            margin-left: 10px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
        .btn.add{
            float: right
        }
        .btn.active{
            background: #409eff;
            border-color: #409eff;
            color: #fff;
        }
        table{
            width: 100%;
        }
        table thead{
            color: #909399;
            text-align: left;
        }
        table thead th{
            border-bottom: 1px solid #ebeef5;
            padding: 12px 0;
        }
        table tr{
            transition: all .3s ease-in-out;
        }
        table td{
            border-bottom: 1px solid #ebeef5;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
        table tr:hover td{
            background: #f5f7fa;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<script src="./index.js"></script>
</body>
</html>
